<template>
	<u-popup v-model="isShow" mode="bottom" :popup="false" :mask="true" :closeable="false" :safe-area-inset-bottom="true"
	 close-icon-color="#ffffff" :z-index="zIndex" :maskCloseAble="maskCloseAble" @close="handleClose">
		<view class="uni-popper__arrow"></view>
		<view class="dialog-caption">
			<view class="title-area">
				<text class="dialog-title">{{popupTitle}}</text>
			</view>
			<view class="dialog-close" @click="handleClose">
				<view class="dialog-close-plus" data-id="close"></view>
				<view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
			</view>
		</view>
		<tui-cascade-selection :itemList="localdata" :reset="reset" @complete="complete"></tui-cascade-selection>
	</u-popup>
</template>

<script>
	import tuiCascadeSelection from "./tui-cascade-selection/tui-cascade-selection.vue"
	
	/**
	 * 级联选择器
	 * @property {String Number} z-index 弹出时的z-index值（默认1075）
	 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
	 * @property {String} default-region 默认选中的地区，中文形式
	 * @property {String} default-code 默认选中的地区，编号形式
	 */
	export default {
		name: 'u-select',
		components: {
			tuiCascadeSelection
		},
		props: {
			// 通过双向绑定控制组件的弹出与收起
			isShow: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			popupTitle: {
				type: String,
				default: '请选择'
			},
			localdata:{
				type: [String, Array],
				default: []
			},
		},
		data(){
			return{
				reset: 0,
			}
		},
		created() {
			
		},
		methods:{
			complete(e){
				this.$emit('complete',e)
			},
			handleClose(){
				this.$emit('handleClose')
			}
		}
	}
</script>
<style lang="scss">
	.uni-data-tree-dialog {
		position: fixed;
		left: 0;
		top: 20%;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		z-index: 102;
		overflow: hidden;
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
	}
	
	.dialog-caption {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		/* border-bottom: 1px solid #f0f0f0; */
	}
	
	.title-area {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		/* #ifndef APP-NVUE */
		margin: auto;
		/* #endif */
		padding: 0 10px;
	}
	
	.dialog-title {
		/* font-weight: bold; */
		line-height: 44px;
	}
	
	.dialog-close {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		padding: 0 15px;
	}
	
	.dialog-close-plus {
		width: 16px;
		height: 2px;
		background-color: #666;
		border-radius: 2px;
		transform: rotate(45deg);
	}
	
	.dialog-close-rotate {
		position: absolute;
		transform: rotate(-45deg);
	}
	
	.picker-view {
		flex: 1;
		overflow: hidden;
	}
	
	/* #ifdef H5 */
	@media all and (min-width: 768px) {
		.uni-data-tree-cover {
			background-color: transparent;
		}
	
		.uni-data-tree-dialog {
			position: absolute;
			top: 55px;
			height: auto;
			min-height: 400px;
			max-height: 50vh;
			background-color: #fff;
			border: 1px solid #EBEEF5;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			overflow: unset;
		}
	
		.dialog-caption {
			display: none;
		}
	
		.icon-clear {
			margin-right: 5px;
		}
	}
	
	/* #endif */
	
	/* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
	/* #ifndef APP-NVUE */
	.uni-popper__arrow,
	.uni-popper__arrow::after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 6px;
	}
	
	.uni-popper__arrow {
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
		top: -6px;
		left: 10%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
	
	.uni-popper__arrow::after {
		content: " ";
		top: 1px;
		margin-left: -6px;
		border-top-width: 0;
		border-bottom-color: #fff;
	}
	/* #endif */
</style>
